<template>
  <el-drawer
    v-model="drawerVisible"
    :z-index="1000"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    size="100%"
    :title="`${drawerProps.title}`"
  >
    <div class="header">
      <!-- <div class="countdownTime">{{ `距离考试结束还剩：${countdownTime}` }}</div> -->
      <div class="examTitle">{{ testSelfDtl.testName }}</div>
      <div class="examSubTitle">
        <div class="examSubTitle__item">
          <span class="examSubTitle__item__lab">考试时长：</span>
          <span class="examSubTitle__item__text">{{ examDuration }}</span>
          <span class="examSubTitle__item__unit">分钟</span>
        </div>
        <div class="examSubTitle__item">
          <span class="examSubTitle__item__lab">考生：</span>
          <span class="examSubTitle__item__text">{{ studentName }}</span>
        </div>
        <div class="examSubTitle__item">
          <span class="examSubTitle__item__lab">监考老师：</span>
          <span class="examSubTitle__item__text">{{ testSelfDtl.teacherName }}</span>
        </div>

        <div class="examSubTitle__item" v-if="testSelfDtl.status === 2 && testSelfDtl.score && testSelfDtl.score + ''">
          <span class="examSubTitle__item__lab">得分：</span>
          <span class="examSubTitle__item__text">{{ testSelfDtl.score }}</span>
          <span class="examSubTitle__item__unit">分</span>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="testPart">
        <div class="testPart__title">试题部分</div>
        <div class="testPaper">
          <div class="testList" v-for="(item, index) in questionList" :key="index">
            <div class="testTypeTitle">{{ `${questionTypeCnNo[index]}、${item.label}` }}</div>
            <div class="testItem" v-for="(val, idx) in item.value" :key="val.questionId">
              <div class="testName">
                <span>{{ `${idx + 1}、 ${val.questionStem}` }}</span>
                <span class="isRight" v-if="item.label !== '填空题' && item.label !== '问答题'">{{
                  val.answerIsRight === 1 ? "√" : "×"
                }}</span>
              </div>
              <div class="testAnswer">
                <div v-if="item.label === '单选题'">
                  <el-radio-group class="answerContent" v-model="val.answerContent" disabled>
                    <el-radio :label="v.optionCode" size="large" v-for="v in val.optionList" :key="v.optionCode"
                      >{{ `${v.optionCode}、${v.optionContent}` }}
                    </el-radio>
                  </el-radio-group>
                </div>
                <div v-if="item.label === '多选题'">
                  <el-checkbox-group class="answerContent" v-model="val.answerContent" disabled>
                    <el-checkbox :label="v.optionCode" size="large" v-for="v in val.optionList" :key="v.optionCode">{{
                      `${v.optionCode}、${v.optionContent}`
                    }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div v-if="item.label === '判断题'">
                  <el-radio-group class="answerContent" v-model="val.answerContent" disabled>
                    <el-radio label="T" size="large">正确 </el-radio>
                    <el-radio label="F" size="large">错误</el-radio>
                  </el-radio-group>
                </div>
                <div v-if="item.label === '填空题'">
                  <div class="answerContent">
                    <el-input
                      placeholder="请填写正确答案"
                      v-model="val.answerContent"
                      size="large"
                      style="margin-top: 10px"
                      disabled
                    ></el-input>
                  </div>
                </div>
                <div v-if="item.label === '问答题'">
                  <div class="answerContent">
                    <el-input
                      type="textarea"
                      placeholder="请作答"
                      v-model="val.answerContent"
                      style="margin-top: 10px"
                      :autosize="{ minRows: 3, maxRows: 6 }"
                      disabled
                    ></el-input>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="CabineDrawer">
import { ref } from "vue";

import { ExamTestSelf } from "@/api/interface";
// import { CirclePlus } from "@element-plus/icons-vue";
import { getExamSelfDtl } from "@/api/modules/examManage/examTestSelf";
import { leftTimer } from "@/utils";
import { useUserStore } from "@/stores/modules/user";
const userStore = useUserStore();
const studentName = userStore.userInfo.userName;
const questionTypeCnNo = ["一", "二", "三", "四", "五"];
const questionList: any = ref([]);
const countdownTime: any = ref("");
const testSelfDtl: any = ref({});
const examDuration: any = ref(0);

interface DrawerProps {
  title: string;
  isView: boolean;
  row: Partial<ExamTestSelf.ResExamTestSelfList>;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
  resetTableList?: () => void;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});
// 接收父组件传过来的参数
const acceptParams = async (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
  await getExamSelfDtl({ testId: drawerProps.value.row.testId as number }).then(res => {
    testSelfDtl.value = res.result;
    const {
      startTime,
      endTime,
      singleSelectionQuestionList,
      moreSelectionQuestionList,
      tfQuestionList,
      completionQuestionList,
      qaQuestionList
    } = res.result as ExamTestSelf.ResTestInfo;
    examDuration.value = Math.ceil((new Date(endTime).getTime() - new Date(startTime).getTime()) / 3600000);
    examDuration.value = Math.ceil(examDuration.value);
    moreSelectionQuestionList?.length &&
      moreSelectionQuestionList.forEach((item: any) => {
        item.answerContent = item.answerContent.split("");
      });

    questionList.value = [
      { label: "单选题", value: singleSelectionQuestionList },
      { label: "多选题", value: moreSelectionQuestionList },
      { label: "判断题", value: tfQuestionList },
      { label: "填空题", value: completionQuestionList },
      { label: "问答题", value: qaQuestionList }
    ].filter((item: any) => {
      return item.value;
    });

    leftTimer(endTime, (val: any) => {
      countdownTime.value = `${val[1]}小时${val[2]}分${val[3]}秒`;
    });
  });
};

defineExpose({
  acceptParams
});
</script>
<style lang="scss" scope>
.header {
  width: 80%;
  min-width: 1000px;
  padding-bottom: 30px;
  margin: 0 auto;
  border-bottom: 1px solid #eeeeee;
  .countdownTime {
    padding: 10px;
    font-family: "仿宋";
    font-size: 18px;
    font-weight: 600;
    color: #ff0000;
    text-align: right;
  }
  .examTitle {
    padding: 10px 0 30px;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
  }
  .examSubTitle {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    font-weight: 500;
    .examSubTitle__item {
      display: flex;
      justify-content: center;
      .examSubTitle__item__text {
        padding: 0 10px;
        text-decoration: underline;
        text-underline-offset: 2px;
      }
    }
  }
}
.content {
  .testPart {
    width: 80%;
    min-width: 1000px;
    padding: 30px 0;
    margin: 0 auto;
    background: var(--el-color-primary-light-9);
    .testPart__title {
      padding: 0 30px;
      margin-bottom: 30px;
      font-size: 16px;
      font-weight: 600;
      line-height: 40px;
      color: var(--el-color-primary);
    }
    .testPaper {
      padding: 0 50px;
      background: var(--el-color-primary-light-9);
      .testList {
        padding: 20px 0 0;
        .testTypeTitle {
          padding: 0 0 20px;
        }
        .testItem {
          margin-bottom: 10px 0;
          .isRight {
            margin-left: 10px;
            font-size: 18px;
            color: #ff0000;
          }
          .answerContent {
            padding: 10px;
            margin: 0 10px;
          }
        }
      }
    }
  }

  padding: 30px 0;
}
</style>
